<template>
	<view class="page-content-box" style="padding-bottom: 140rpx;height: auto;">
		<view v-if="hasLoad">
			<view class="big-img-box position-r">
				<swiper :current="imgIndex" @change="imgChange" class="img-swiper" :circular="true">
					<swiper-item v-for="(item,index) in product_img_list" :key="index" class="index-swiper-item">
						<image style="width: 100%; height: 100%;" mode="aspectFill" :src="baseUrl + item"
							@tap="viewImage" :data-index="index"></image>
					</swiper-item>
				</swiper>
				<button @click.stop="getCollect(product_info.sku_id)" class="collect-btn">
					<image v-if="!isCollect" style="width: 20rpx; height: 20rpx;" mode="aspectFit"
						src="../../static/shoucang1.png"></image>
					<image v-else style="width: 20rpx; height: 20rpx;" mode="aspectFit"
						src="../../static/shoucang2.png"></image>
					收藏
				</button>
				<view class="img-num">{{imgIndex+1}}/{{product_img_list.length}}</view>
			</view>
			<view class="info-content bg-w">
				<view class="name position-r">
					<image style="width: 64rpx; height: 30rpx;vertical-align: middle;margin-right: 14rpx;"
						mode="aspectFit" src="../../static/tuijian.png"></image>
					<text>{{product_info.name}}</text>
					<text v-if="product_info.discounts_deduction>0"
						class="de-tips">下单立减￥{{product_info.discounts_deduction}}</text>
				</view>
				<view class="des">{{product_info.intro}}</view>
				<view class="cost-sale">
					<view class="cost-box">
						<template v-if="user_type > 0">
							<text class="new-cost">￥{{product_info.vip_sale_price}}</text>
							<text class="old-cost" style="margin-left: 12rpx;">￥{{product_info.sale_price}}</text>
						</template>
						<template v-if="user_type == 0">
							<text class="new-cost">￥{{product_info.sale_price}}</text>
							<text class="old-cost" style="margin-left: 12rpx;">￥{{product_info.origin_price}}</text>
						</template>
					</view>
					<view class="sale-num">月销量：{{monthly_sales}}</view>
					<view class="sale-num" v-if="stock_info.usable_count <= 100">剩余：{{stock_info.usable_count}}</view>
				</view>
			</view>
			<view class="detail-content">
				<view class="title-box">详情</view>
				<view class="flex-block-row detail-text">
					<view class="label-text">描述：</view>
					<view class="right-text">{{product_info.remark}}</view>
				</view>
				<!-- 				<view class="flex-block-row detail-text">
					<view class="label-text">分量：</view>
					<view class="right-text">{{product_info.weight}}</view>
				</view>
				<view class="flex-block-row detail-text">
					<view class="label-text">主料：</view>
					<view class="right-text">{{product_info.staple_food}}</view>
				</view>
				<view class="flex-block-row detail-text">
					<view class="label-text">辅料：</view>
					<view class="right-text">{{product_info.supplementary_food}}</view>
				</view> -->
			</view>
			<view class="detail-content" v-if="vip_list.length > 0">
				<view class="title-box">会员价格</view>
				<view v-for="(item,index) in vip_list" class="flex-block-row detail-text">
					<view class="label-text">{{item.vip_name}}：</view>
					<view class="right-text">{{item.vip_price}}元<span v-if="index == user_type">（当前等级）</span></view>
				</view>
			</view>
			<!-- <view class="eval-content-box">
				<view class="title-box">评价 <text>（好评率96%）</text> <text>共3条评价</text></view>
				<view class="eval-box">
					<view class="eval-item flex-block-row">
						<view class="eval-img">
							<image style="width: 80rpx; height: 80rpx;" mode="aspectFit" src="../../static/touxiang.png"></image>
						</view>
						<view class="eval-content">
							<view class="name-box flex-block-row">
								<view class="name">Carson</view>
								<view class="time">2020.02.22</view>
							</view>
							<view class="content">烤鸭皮脆肉嫩，下次会回点，推荐！</view>
						</view>
					</view>
					<view class="to-eval">查看全部评价</view>
				</view>
			</view> -->
			<view v-if="recommended_like.length>0" class="recommend-box">
				<view class="index-title p-x-20">猜你喜欢</view>
				<view class="more-list-content">
					<view v-if="recommended_like.length==0" class="no-data-box">
						<image mode="aspectFit" src="../../static/wushuju.png"></image>
						<view>暂无数据~</view>
					</view>
					<view class="goods-list-content">
						<block v-for="(item,index) in recommended_like" :key="index">
							<view class="goods-list">
								<navigator :url="'/pages/goodsdetail/goodsdetail?sku_number='+item.sku_number"
									hover-class="none">
									<view class="good-img">
										<image style="width: 300rpx; height: 240rpx;border-radius: 20rpx;"
											mode="aspectFill" :src="baseUrl + item.image_url_s"></image>
										<!-- <image style="width: 300rpx; height: 240rpx;border-radius: 20rpx;" mode="aspectFill" :src="item.image_url_s"></image> -->
									</view>
									<view :class="index<3?'name txt-ellipsis img-name':'name txt-ellipsis'">
										<image v-if="index<3"
											style="width: 64rpx; height: 30rpx;vertical-align: middle;margin-right: 14rpx;"
											mode="aspectFit" src="../../static/tuijian.png"></image>
										<text>{{item.name}}</text>
									</view>
									<view class="des txt-ellipsis-2">
										{{item.intro}}
									</view>
									<view>
										<text class="new-cost" style="margin-right: 10rpx;">￥{{item.sale_price}} </text>
										<text class="old-cost"> ￥{{item.origin_price}}</text>
									</view>
									<button plain="true" @click.stop="$base.addToCart" :data-idx="item.id"
										class="cart-btn">
										<image style="width: 50rpx; height: 44rpx;" mode="aspectFit"
											src="../../static/add.png"></image>
									</button>
									<view v-if="item.discounts_deduction>0" class="tab-monney">
										下单立减￥{{item.discounts_deduction}}</view>
								</navigator>
							</view>
						</block>
					</view>
				</view>
			</view>
			<view class="bottom-cart-box">
				<view class="cart-box">
					<navigator url="/pages/cart/cart" open-type="switchTab" hover-class="none">
						<image style="width: 48rpx; height: 48rpx;" mode="aspectFit"
							src="../../static/gouwuche_green.png"></image>
						<text v-if="shopcart_count>0">{{shopcart_count}}</text>
					</navigator>
				</view>
				<view class="btn-box">
					<button class="add-cart" type="primary" @click="addToCartNow"
						:data-idx="product_info.sku_id">加入购物车</button>
					<button v-if="product_info.status==1" class="buy-now" type="primary" @click="goBuyNow">立即购买</button>
					<button v-else class="buy-now no-buy" type="primary">立即购买</button>
				</view>
			</view>
			<view v-if="backTopValue" class="back-top" @click="backTop()">
				<image style="width: 99rpx; height: 99rpx;" mode="aspectFit" src="../../static/zhiding.png"></image>
			</view>
		</view>
		<toast></toast>
	</view>
</template>

<script>
	var graceRichText = require("../../common/richText.js");
	export default {
		data() {
			return {
				baseUrl: this.$client.IMG_URL,
				sku_number: null,
				isCollect: false,
				imgIndex: 0,
				product_info: {},
				stock_info: {
					usable_count : 0,
				},
				product_img_list: ['/upload/goods/20200508145453_468.png', '/upload/goods/20200508145453_468.png',
					'/upload/goods/20200508145453_468.png', '/upload/goods/20200508145453_468.png'
				],
				product_description: '',
				vip_list: [],
				recommended_like: [],
				sendTipsShow: false,
				backTopValue: false,
				hasLoad: false,
				monthly_sales: 0,
				shopcart_count: '',
				user_type: 0,
			}
		},
		onLoad(options) {
			this.sku_number = options.sku_number;
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#70dbff'
			})
		},
		onShow() {
			this.getInitData();
			this.getLikeData();
		},
		methods: {
			getInitData() {
				var _this = this;
				_this.$loading();
				this.hasLoad = false;
				this.$client.get('/api/index/productdetails', {
					sku_number: _this.sku_number
				}, function(res, message) {
					_this.$loading(false);
					_this.hasLoad = true;
					_this.product_info = res.info;
					_this.stock_info = res.stock_info;
					_this.monthly_sales = res.monthly_sales;
					_this.product_img_list = res.info.image_list;
					_this.vip_list = res.info.vip_list;
					if (uni.getStorageSync("key") && uni.getStorageSync("secret")) {
						_this.getCollectStatus(res.info.sku_id);
					}
				}, function(res) {
					_this.$loading(false);
					_this.hasLoad = true;
				});
			},
			getLikeData() {
				var _this = this;
				_this.$loading();
				this.$client.get('/api/index/guess', {}, function(res, message) {
					_this.$loading(false);
					_this.recommended_like = res.list;
				}, function(res) {
					_this.$loading(false);
				});
			},
			getCollectStatus(sku_id) {
				var _this = this;
				this.$client.get('/api/user/getcollect', {
					sku_id: sku_id
				}, function(res, message) {
					_this.isCollect = res.status;
					_this.shopcart_count = res.shopcart_count;
					_this.user_type = res.user_type;
					// 设置会员价
					if (res.user_type > 0) {
						_this.product_info.vip_sale_price = _this.product_info['sale_price_v' + res.user_type];
					}
				}, function(res) {}, true);
			},
			imgChange(e) {
				const tabIndex = e.detail.current;
				this.imgIndex = tabIndex;
			},
			showSendTips() {
				var _this = this;
				this.sendTipsShow = true;
				setTimeout(function() {
					_this.sendTipsShow = false;
				}, 3000);
			},
			getCollect(id) {
				var _this = this;
				uni.showLoading({
					title: '加载中...'
				});
				this.$client.post('/api/user/savecollect', {
					sku_id: id
				}, function(res, message) {
					uni.hideLoading();
					_this.isCollect = res.result;
					_this.$util.showToast({
						title: message
					});
				}, function(res) {
					uni.hideLoading();
					if (res) {
						_this.$util.showToast({
							title: res
						});
					}
				}, true);
			},
			//预览图片
			viewImage(e) {
				var view_list = [];
				this.product_img_list.forEach(item => {
					view_list.push(this.baseUrl + item);
				})
				uni.previewImage({
					urls: view_list,
					current: e.currentTarget.dataset.index
				});
			},
			async addToCartNow(e) {
				if(this.stock_info.usable_count <= 0){
					this.$util.showToast({
						title: '已经抢完了'
					});
					return false;
				}
				await this.$base.addToCart(e);
				this.getCollectStatus();
			},
			goBuyNow() {
				if(this.stock_info.usable_count <= 0){
					this.$util.showToast({
						title: '已经抢完了'
					});
					return false;
				}
				this.product_info.num = 1;
				var info = JSON.stringify([this.product_info]);
				uni.navigateTo({
					url: "/pages/confirmorder/confirmorder?info=" + info
				});
			},
			// 滚动到顶部
			backTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				})
			},
		},
		// 监听滚动条坐标
		onPageScroll(e) {
			var scrollTop = e.scrollTop;
			var backTopValue = scrollTop > 300 ? true : false;
			this.backTopValue = backTopValue;
		},
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
			}
			return {
				title: '分享好友，邀请好友领取新人优惠',
				path: '/pages/goodsdetail/goodsdetail?sku_number=' + this.sku_number
			}
		},
		onShareTimeline() {
			return {
				title: this.$client.AppName,
				query: 'sku_number=' + this.sku_number,
			}
		},
		onPullDownRefresh() {
			this.getInitData();
			this.getLikeData();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style>
	.more-list-content {
		background-color: transparent;
	}

	.img-swiper {
		width: 100%;
		height: 560rpx;
		/* overflow: hidden;
		white-space: nowrap; */
	}

	.collect-btn {
		width: 100rpx;
		height: 50rpx;
		line-height: 50rpx;
		background: rgba(0, 0, 0, 0.5);
		/* opacity:0.5; */
		border-radius: 25rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		left: auto;
		right: 20rpx;
		top: 20rpx;
		border: none;
		padding: 0;
	}

	.collect-btn image {
		margin: 16rpx 6rpx 10rpx 6rpx;
		vertical-align: top;
	}

	.img-num {
		width: 80rpx;
		height: 40rpx;
		background: rgba(0, 0, 0, 0.5);
		border-radius: 20rpx;
		text-align: center;
		line-height: 40rpx;
		position: absolute;
		left: auto;
		right: 20rpx;
		bottom: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}

	.info-content {
		width: 100%;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.info-content .name {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(22, 22, 22, 1);
		line-height: 50rpx;
		padding-right: 120rpx;
	}

	.info-content .name .de-tips {
		font-size: 24rpx;
		margin-left: 25rpx;
		font-weight: 400;
		color: #FF0000;
	}

	.info-content .des {
		margin-bottom: 16rpx;
		font-size: 28rpx;
		color: rgba(22, 22, 22, 1);
		line-height: 50rpx;
	}

	.info-content .cost-sale {
		display: flex;
		flex-direction: row;
	}

	.info-content .cost-box {
		flex: 2;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(193, 193, 193, 1);
		line-height: 40rpx;
	}

	.detail-content,
	.eval-content-box {
		background-color: #fff;
		margin-top: 20rpx;
		padding-bottom: 20rpx;
	}

	.detail-content .title-box,
	.eval-content-box .title-box {
		height: 80rpx;
		line-height: 80rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 32rpx;
		font-weight: bold;
		color: rgba(22, 22, 22, 1);
		position: relative;
	}

	.detail-content .title-box::before,
	.eval-content-box .title-box::before {
		content: '';
		width: 60rpx;
		height: 10rpx;
		display: block;
		background: url(../../static/zhuangshi2.png) 0 0 no-repeat;
		background-size: contain;
		position: absolute;
		left: 20rpx;
		bottom: 20rpx;
		z-index: -1;
	}

	.eval-content-box .title-box text {
		font-size: 24rpx;
		color: rgba(153, 153, 153, 1);
		font-weight: normal;
	}

	.detail-content .detail-text {
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.detail-content .label-text {
		font-size: 28rpx;
		color: rgba(153, 153, 153, 1);
		line-height: 60rpx;
		width: 140rpx;
	}

	.detail-content .right-text {
		font-size: 28rpx;
		color: rgba(22, 22, 22, 1);
		line-height: 40rpx;
		padding: 10rpx 0;
		width: 570rpx;
	}

	.eval-box {
		padding: 0 20rpx;
		box-sizing: border-box;
	}

	.eval-box .eval-item {
		padding: 20rpx 0;
	}

	.eval-box .eval-item+.eval-item {
		border-top: 1rpx solid rgba(238, 238, 238, 1);
	}

	.eval-box .eval-item .eval-img {
		width: 80rpx;
	}

	.eval-box .eval-item .eval-content {
		width: 630rpx;
		padding-left: 20rpx;
		box-sizing: border-box;
	}

	.eval-box .eval-item .eval-content .name {
		flex: 2;
		font-size: 28rpx;
		font-weight: bold;
		color: rgba(22, 22, 22, 1);
	}

	.eval-box .eval-item .eval-content .time {
		flex: 1;
		text-align: right;
		font-size: 24rpx;
		color: rgba(153, 153, 153, 1);
	}

	.eval-box .to-eval {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		background: rgba(251, 251, 251, 1);
		border-radius: 20rpx;
		font-size: 28rpx;
		color: rgba(22, 22, 22, 1);
		text-align: center;
	}

	.info-content .cost-box .new-cost {
		font-size: 36rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 104, 38, 1);
	}

	.info-content .cost-box .old-cost {
		text-decoration: line-through;
	}

	.info-content .sale-num {
		flex: 1;
		text-align: right;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(193, 193, 193, 1);
		line-height: 40rpx;
	}

	.bottom-cart-box {
		width: 750rpx;
		height: 140rpx;
		background: #129de8;
		box-shadow: 0 2rpx 10rpx 0 rgba(115, 115, 115, 0.15);
		position: fixed;
		left: 0;
		bottom: 0;
		padding: 20rpx 40rpx 40rpx 40rpx;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
	}

	.bottom-cart-box .cart-box {
		width: 190rpx;
		position: relative;
	}

	.bottom-cart-box .cart-box navigator {
		width: 48rpx;
		height: 48rpx;
		margin-left: 51rpx;
		margin-top: 16rpx;
	}

	.bottom-cart-box .cart-box navigator text {
		display: block;
		padding: 0 6rpx;
		height: 30rpx;
		line-height: 30rpx;
		border-radius: 15rpx;
		background: rgba(255, 25, 25, 1);
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		position: absolute;
		left: 90rpx;
		top: 0;
	}

	.bottom-cart-box .btn-box {
		width: 480rpx;
		display: flex;
		flex-direction: row;
	}

	.bottom-cart-box .btn-box .add-cart,
	.bottom-cart-box .btn-box .buy-now {
		width: 240rpx;
		height: 80rpx;
		background: #FF5722;
		border-radius: 40rpx 0 0 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 80rpx;
		box-sizing: border-box;
		border: none;
	}

	.bottom-cart-box .btn-box .buy-now {
		background: rgba(65, 165, 245, 1);
		border-radius: 0 40rpx 40rpx 0;
	}

	.bottom-cart-box .btn-box .no-buy {
		background: #888888;
		color: #C1C1C1;
	}

	.bottom-cart-box .btn-box button::after {
		display: none;
	}
</style>
